<template>
  <div>
    <div class="pb-70">
      <nav-bar class="page-part" :bar-list="barList" :show-container="showFalse"></nav-bar>
      <swipe :swipe-image="image" class="card-swipe"></swipe>
      <div class="line"></div>
      <nav-bar class="sub-tab" :bar-list="subTab" :show-container="showTrue"></nav-bar>
    </div>
  </div>
</template>

<script>
  import NavBar from '@/container/card/NavBar'
  import swipe from '@/components/swipe'

  export default {
    name: 'CardHolder',
    components: {
      NavBar,
      swipe
    },
    data () {
      return {
        barList: [
          {num: '1', title: '办卡推荐', pathName: 'Recommend', iconClass: 'nav-recommend'},
          {num: '2', title: 'MCC工具', pathName: 'Mcc', iconClass: 'nav-mcc'},
          {num: '3', title: '银行电话', pathName: 'Phone', iconClass: 'nav-customer-service'},
          {num: '4', title: '玩卡讲堂', pathName: 'Forum', iconClass: 'nav-book'}
        ],
        image: [],
        subTab: [
          {num: '1', title: '账单管理'},
          {num: '2', title: '年费管理'}
        ],
        showTrue: true,
        showFalse: false
      }
    },
    mounted () {
      // 获取轮播图
      this.$post('/vue/carousel/get_list', {type: 1}).then(data => {
        this.image = data
      })
    }
  }
</script>

<style lang="less">
  @c-124: rgb(124, 124, 124);
  @c-169: rgb(169, 169, 169);
  @c-226: rgb(226, 226, 226);
  @c-235: rgb(235, 235, 235);
  @c-blue: rgb(108, 184, 222);
  @c-dark-blue: rgb(240, 244, 247);

  .pb-70 {
    padding-bottom: 58px;
    height: calc(~'100vh - 58px');
    overflow-x: hidden;
    overflow-y: scroll;
    .page-part {
      .mint-navbar {
        color: @c-blue;
        font-size: 12px;
        background-color: #FFF;
        .mint-tab-item {
          &.is-selected {
            border-bottom: inherit;
            color: inherit;
            margin-bottom: inherit;
          }
        }
      }
    }
    .line {
      height: 8px;
      background-color: rgb(240, 244, 247);
    }
    .card-swipe {
      padding: 0 12px 12px;
      height: 88px;
      background-color: #FFF;
      .mint-swipe-items-wrap {
        border-radius: 8px;
      }
    }
    .sub-tab {
      font-size: 0;
      .mint-navbar {
        display: inline-flex;
        vertical-align: middle;
        color: @c-blue;
        .mint-tab-item {
          padding: 12px 0;
          &.is-selected {
            border-bottom: 0;
            margin-bottom: 0;
            color: #FFF;
            background-color: @c-blue;
          }
          .mint-tab-item-label {
            font-size: 15px;
            line-height: 24px;
            img {
              width: 12px;
              height: 12px;
              display: none;
            }
          }
          &:first-child {
            .mint-tab-item-label img {
              display: inline;
            }
          }
        }
        &.mini-screen {
          width: calc(~'100vw - 68px');
        }
      }
      .screen {
        display: inline-flex;
        vertical-align: middle;
        width: 68px;
        padding: 12px 12px 12px 5px;
        background-color: #FFF;
        border-left: 1px solid @c-226;
        box-sizing: border-box;
        text-align: center;
        img {
          width: 24px;
          height: 24px;
          vertical-align: middle;
        }
        span {
          font-size: 13px;
          line-height: 24px;
          color: @c-124;
          vertical-align: middle;
        }
      }
      .mint-tab-container {
        margin-top: 2px;
        .mui-content {
          height: auto;
          overflow-x: hidden;
          overflow-y: scroll;
          background-color: #FFF;
          -webkit-overflow-scrolling: touch;
          .mui-control-content {
            position: relative;
            display: block;
            .mui-card {
              height: auto;
              font-size: 14px;
              position: relative;
              overflow: hidden;
              margin: 10px;
              border-radius: 2px;
              background-color: #f2f7fa;
              background-clip: padding-box;
              box-shadow: 0 1px 2px rgba(0,0,0,.3);
              text-align: left;
              transition: .5s all;
              &.radius {
                border-radius: 10px;
              }
              &.disabled {
                background-color: @c-dark-blue;
                box-shadow: none;
                .mui-card-content {
                  .right-word-black {
                    .big {
                      color: #a9a9a9;
                    }
                    .middle {
                      color: #a9a9a9;
                    }
                  } 
                  .word-no-link {
                    color: @c-169;
                  }
                }
              }
              &.short {
                height: 40px;
                .complete-image {
                  display: none;
                }
              }
              .mui-card-media {
                vertical-align: bottom;
                color: #fff;
                background-position: center;
                background-size: cover;
              }
              .mui-card-popup {
                position: absolute;
                z-index: 1;
                top: 32px;
                right: 32px;
                width: 0;
                height: 98px;
                background-color: #FFF;
                border-radius: 4px;
                box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
                display: flex;
                flex-wrap: wrap;
                transition: .2s all;
                .popup-item {
                  width: 0;
                  height: 32px;
                  flex: 0 0 auto;
                  font-size: 12px;
                  line-height: 24px;
                  text-align: center;
                  color: @c-124;
                  box-sizing: border-box;
                  padding: 4px 0;
                  border-bottom: 1px solid @c-226;
                  box-sizing: border-box;
                  overflow: hidden;
                  display: none;
                  &:active {
                    background-color: rgba(0, 0, 0, 0.2);
                  }
                  &:last-child {
                    border-bottom: 0;
                  }
                }
                &.show {
                  width: 72px;
                  .popup-item {
                    width: 100%;
                    display: block;
                  }
                }
              }
              .mui-card-header {
                font-size: 13px;
                border-radius: 2px 2px 0 0;
                display: block;
                padding: 8px 8px 0;
                color: #000;
                .mui-media-body {
                  font-size: 0;
                  line-height: 24px;
                  color: #333;
                  width: 100%;
                }
                .my-icon {
                  width: 24px;
                  height: 24px;
                  display: inline-block;
                  vertical-align: middle;
                  background-repeat: no-repeat;
                  background-size: 100% 100%;
                }
                .sub-title {
                  color: #7c7c7c;
                }
                .title {
                  font-weight: bold;
                }
                span {
                  font-size: 13px;
                  margin-left: 8px;
                  display: inline-block;
                  vertical-align: middle;
                }
                .cooperation-icon {
                  width: 24px;
                  height: 24px;
                  float: right;
                }
                &::after {
                  top: auto;
                  bottom: 0;
                }
              }
              .mui-card-footer, .mui-card-header {
                position: relative;
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                min-height: 0;
                -webkit-box-pack: justify;
                -webkit-justify-content: space-between;
                justify-content: space-between;
                -webkit-box-align: center;
                -webkit-align-items: center;
                align-items: center;
              }
              .mui-card-footer:before, .mui-card-header:after {
                position: absolute;
                top: 0;
                right: 0;
                left: 0;
                height: 1px;
                content: '';
                -webkit-transform: scaleY(.5);
                transform: scaleY(.5);
                background-color: #c8c7cc;
              }
              .mui-card-footer {
                padding: 8px;
                font-size: 12px;
                line-height: 20px;
                color: #a9a9a9;
                border-radius: 0 0 2px 2px;
                p {
                  margin-bottom: 4px;
                  &:last-child {
                    margin-bottom: 0;
                  }
                }
              }
              .mui-card-content {
                font-size: 12px;
                position: relative;
                .flex {
                  display: flex;
                  align-items: flex-start;
                  align-content: flex-start;
                  justify-content: space-between;
                  .flex-item {
                    &.short {
                      flex: 0.5;
                    }
                    &.long {
                      flex: 1;
                    }
                  }
                }
                p {
                  color: #a9a9a9;
                  line-height: 20px;
                }
                .word-link {
                  font-size: 16px;
                  line-height: 20px;
                  color: @c-blue;
                  text-decoration: underline;
                }
                .word-no-link {
                  font-size: 16px;
                  line-height: 20px;
                  color: @c-blue;
                  text-decoration: none;
                }
                .right-word-black {
                  font-size: 0;
                  line-height: 20px;
                  div {
                    display: inline-block;
                    vertical-align: middle;
                  }
                  .big {
                    width: 40px;
                    margin-right: 8px;
                    color: @c-blue;
                    font-size: 32px;
                    line-height: 40px;
                    text-align: right;
                  }
                  .normal {
                    font-size: 12px;
                    text-align: left;
                    vertical-align: top;
                  }
                  .small {
                    font-size: 12px;
                    text-align: left;
                  }
                  .middle {
                    color: @c-blue;
                    font-size: 16px;
                    text-align: left;
                  }
                }
              }
              .mui-card-content-inner {
                overflow: hidden;
                position: relative;
                padding: 12px;
              }
              .complete-image {
                width: 72px;
                height: 72px;
                position: absolute;
                right: 8px;
                bottom: 8px;
              }
            }
            .mui-card-btn {
              font-size: 0;
              text-align: center;
              padding: 12px;
              img {
                width: 24px;
                height: 24px;
                margin-right: 4px;
                display: inline-block;
                vertical-align: middle;
              }
              .card-btn {
                display: inline-block;
                vertical-align: middle;
                color: #a9a9a9;
                font-size: 13px;
                line-height: 24px;
              }
            }
            .mui-card-link {
              font-size: 12px;
              line-height: 24px;
              color: @c-blue;
              margin: 24px auto;
              span {
                text-decoration: underline;
                vertical-align: middle;
              }
              img {
                width: 24px;
                height: 24px;
                vertical-align: middle;
              }
            }
          }
          &.fee-card {
            .mui-control-content .mui-card .complete-image {
              width: 68px;
              height: 68px;
              right: 0;
              bottom: 0;
            }
          }
        }
      }
      .mint-popup {
        width: 82vw;
        bottom: -50%;
      }
    }
    .dp-ib {
      display: inline-blobk;
    }
  }
</style>